<template>
	<public-view navType="other" navTitle="附近门店">
		<view class="content">
			<view class="list-box flex f-d-c a-i-c">
				<block v-for="(item, index) in list" :key="index">
					<view class="items" @click="changeStore(item)">
						<image class="bgimg" src="@/static/images/stroe-item.svg" mode=""></image>
						<view class="store-item-box flex f-d-c">
							<view class="item-top-box flex a-i-c j-c-b">
								<view class="left flex a-i-c f-s-30 f-w-b">
									{{item.name || ""}}
								</view>
								<view class=" flex a-i-c">
									<view class="right flex a-i-c color-2567F3 f-s-24 j-c-c">
										<image class="location-icon" src="@/static/images/my/blue-location.svg" mode=""></image>
										{{item.distance || 0}}km
									</view>
									<view class="active-store all-center" :class="id === item.id?'active':'unactive'">
										<image class="duigou" v-if="id === item.id" src="@/static/images/duigou.svg" mode=""></image>
									</view>
								</view>
							</view>
							<view class="time-and-locaiton-box w-100 flex f-d-c f-s-24 color-999">
								<view class="flex a-i-c item">
									<image class="icon" src="@/static/images/circle/location-icon.svg" mode=""></image>
									{{item.address || ""}}
								</view>
								<view class="flex a-i-c item">
									<image class="icon" src="@/static/images/circle/send-time-icon.svg" mode=""></image>
									营业时间：{{item.business_time_text || ""}}
								</view>
							</view>
							<view class="operate-box f-s-24 flex a-i-c">
								<view class="item bg1 all-center" @click="$callPhone(item.contact.m.number)">
									<image class="phone-icon" src="@/static/images/my/store-phone-icon.svg" mode=""></image>
									打电话
								</view>
								<view class="item bg2 all-center">
									<image class="phone-icon" src="@/static/images/my/store-map-icon.svg" mode=""></image>
									到这去
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</public-view>
</template>

<script>
	import {getStoreList} from "@/utils/pagePublic.js"
	export default {
		data() {
			return {
				lng:"",
				lat:"",
				page:1,
				list:[],
				id:""
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getLocationF()
			let data = this.$store.state.ready_stroe||{}
			if(data.id){
				console.log(this.$store.state.ready_stroe)
				this.id = data.id
			}
		},
		onReachBottom() {
			this.page++
			this.getNearByStoreList()
		},
		methods:{
			changeStore(item){
				// ready_stroe
				this.id = item.id
				this.$store.commit("changeReadyStore",item)
				uni.navigateBack()
			},
			getLocationF(){
				let that = this
				that.$location.myGetLocation((res)=>{
					console.log(res)
					that.lng = res.lng
					that.lat = res.lat
					that.getNearByStoreList()
				},false)
			},
			getNearByStoreList(){
				let that = this
				getStoreList({
					lng:that.lng,
					lat:that.lat,
					page:that.page,
					rows:10
				},res=>{
					console.log(res)
					if(that.page === 1){
						that.list = res.data.data
					}else{
						if(res.data.data.length>0){
							that.list = that.list.concat(res.data.data)
						}else{
							that.page--
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active{
		background: #2567F3;
	}
	.unactive{
		border: 2upx solid #9F9F9F;
	}
	.list-box{
		width: 100%;
		padding: 24upx;
		.items{
			width: 100%;
			position: relative;
			height: 272upx;
			border-radius: 28upx;
			margin-bottom: 20upx;
			.bgimg{
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 1;
			}
			.store-item-box{
				width: 100%;
				margin-bottom: 32upx;
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 30upx 14upx 36upx 52upx;
				position: relative;
				z-index: 2;
				.operate-box{
					width: 100%;
					.item{
						border-radius: 8upx;
						margin-right: 12upx;
						width: 184upx;
						height: 58upx;
						.phone-icon{
							width: 24upx;
							height: 24upx;
							margin-right: 16upx;
						}
					}
					.bg1{
						background: #F1F5FE;
						border: 1upx solid #2567F3;
						color: #2567F3;
						
					}
					.bg2{
						background: #2567F3;
						color: #FFFFFF;
						
					}
				}
				.time-and-locaiton-box{
					margin-bottom: 20upx;
					.item{
						margin-bottom: 10upx;
						.icon{
							width: 26upx;
							height: 26upx;
							margin-right: 4upx;
							
						}
					}
				}
				.item-top-box{
					width: 100%;
					margin-bottom: 20upx;
					.right{
						width: 136upx;
						height: 38upx;
						background: #F1F5FE;
						border-radius: 80upx;
						margin-right: 22upx;
						.location-icon{
							width: 24upx;
							height: 24upx;
							margin-right: 4upx;
						}
					}
					.left{
						.icon{
							width: 40upx;
							height: 40upx;
							margin-right: 16upx;
						}
					}
				}
			}
		}
	}
	.active-store{
		border-radius: 50%;
		width: 36upx;
		height: 36upx;
		.duigou{
			width: 24upx;
			height: 16upx;
		}
	}
	.content{
		width: 750upx;
		
	}
</style>
